<template>
  <div class="loading-animation">
    <div class="container">
      <div class="bars-common bar-one"></div>
      <div class="bars-common bar-two"></div>
      <div class="bars-common bar-three"></div>
    </div>
    <div class="container">
      <div class="squares-common square-one"></div>
      <div class="squares-common square-two"></div>
    </div>
    加载中...
  </div>
</template>

<script>
export default {
  name: "LoadingAnimation",
};
</script>

<style scoped>
.loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  color: white;
  font-size: 20px;
  z-index: 9999;
}

.container {
  width: 50vw;
  height: 50vw;
  overflow: hidden;
}

/* Compressing bars style */

.bars-common {
  height: 4vw;
  max-height: 100%;
  width: 1vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.bar-one {
  left: 0;
  right: 4vw;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 .1vw cyan, 0 0 1vw 0 cyan, inset 0 0 .5vw 0 cyan;
}

.bar-two {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 .1vw cyan, 0 0 1vw 0 cyan, inset 0 0 .5vw 0 cyan;
}

.bar-three {
  left: 4vw;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 .1vw cyan, 0 0 1vw 0 cyan, inset 0 0 .5vw 0 cyan;
}

/* Rotating squares style */

.squares-common {
  height: 8vw;
  max-height: 100%;
  width: 8vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0%;
}

.square-one {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 .1vw cyan, 0 0 1vw 0 cyan, inset 0 0 .5vw 0 cyan;
}

.square-two {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 .1vw cyan, 0 0 1vw 0 cyan, inset 0 0 .5vw 0 cyan;
}

/* Animation */
/* Compressing bars animation */

.bar-one {
  animation: barOne 1s .33s ease infinite;
}

@keyframes barOne {
  0%,
  100% {
    box-shadow: 0 0 0 .1vw cyan, 0 0 1vw 0 cyan, inset 0 0 .5vw 0 cyan;
  }
  50% {
    height: 2.5vw;
    box-shadow: 0 0 0 .1vw magenta, 0 0 1vw 0 magenta, inset 0 0 .5vw 0 magenta;
  }
}

.bar-two {
  animation: barTwo 1s .66s ease infinite;
}

@keyframes barTwo {
  0%,
  100% {
    box-shadow: 0 0 0 .1vw cyan, 0 0 1vw 0 cyan, inset 0 0 .5vw 0 cyan;
  }
  50% {
    height: 2.5vw;
    box-shadow: 0 0 0 .1vw magenta, 0 0 1vw 0 magenta, inset 0 0 .5vw 0 magenta;
  }
}

.bar-three {
  animation: barThree 1s .99s ease infinite;
}

@keyframes barThree {
  0%,
  100% {
    box-shadow: 0 0 0 .1vw cyan, 0 0 1vw 0 cyan, inset 0 0 .5vw 0 cyan;
  }
  50% {
    height: 2.5vw;
    box-shadow: 0 0 0 .1vw magenta, 0 0 1vw 0 magenta, inset 0 0 .5vw 0 magenta;
  }
}

/* Rotating squares animation */

.square-one {
  animation: squareOne 4s .99s ease infinite;
}

@keyframes squareOne {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

.square-two {
  animation: squareTwo 4s .99s ease infinite;
}

@keyframes squareTwo {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
</style>
